<template>
  <div class="h-full">
    <div class="flex flex-col md:flex-row gap-6 items-start">
      <aside class="md:w-64 lg:w-72 shrink-0">
        <div class="sticky top-20 bg-white rounded-lg border border-neutral-200 overflow-hidden">
          <div class="border-b border-neutral-200">
            <div class="p-2">
              <h3 class="font-semibold text-neutral-900 mb-3">知识库管理</h3>
              <AsideMenu :menuItems="menuItems" :initActivePath="activePath" />
            </div>

            <!-- 最近更新的文档 -->
            <div class="p-2 border-t border-neutral-200">
              <h1 class="font-semibold text-neutral-900 mb-1.5">最近更新</h1>
              <ul class="space-y-1.5">
                <li>
                  <a href="#" class="group block hover:bg-transparent">
                    <p class="text-sm font-medium text-neutral-800 group-hover:text-primary transition-colors">组件设计规范
                    </p>
                    <p class="text-xs text-neutral-500 mt-1">昨天 09:15</p>
                  </a>
                </li>
                <li>
                  <a href="#" class="group block hover:bg-transparent">
                    <p class="text-sm font-medium text-neutral-800 group-hover:text-primary transition-colors">API调用最佳实践
                    </p>
                    <p class="text-xs text-neutral-500 mt-1">1周前</p>
                  </a>
                </li>
                <li>
                  <a href="#" class="group block hover:bg-transparent">
                    <p class="text-sm font-medium text-neutral-800 group-hover:text-primary transition-colors">状态管理指南
                    </p>
                    <p class="text-xs text-neutral-500 mt-1">2周前</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </aside>
      <div class="flex-1">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const menuItems = [
  {
    path: '/allDocuments',
    name: '全部文档',
    icon: 'book',
  },
  {
    path: '/design',
    name: '设计指南',
    icon: 'pencil-ruler',
  },
  {
    path: '/development',
    name: '开发指南',
    icon: 'code',
  },
  {
    path: '/api',
    name: 'API文档',
    icon: 'file-text-o',
  },
  {
    path: '/operations',
    name: '运维文档',
    icon: 'cogs',
  },
  {
    path: '/project',
    name: '项目计划',
    icon: 'tasks',
  },
]
const activePath = ref('/allDocuments')
</script>

<style lang="scss" scoped></style>
